<template>
    <view>
        <image class="back" src="../../static/images/png02.png"></image>
        <u-navbar
                title="我的评价"
                autoBack
                leftIconColor="#fff"
                :bgColor="'rgba(255,255,255,0)'"
                :titleStyle="{color:'#fff'}"
                :fixed="false"
        >
        </u-navbar>
        <view class="main">
            <view class="list">
                <view class="li">
                    <view class="top">
                        <view class="fl">
                            <view class="h1" v-if="info.type == 1">外卖配送</view>
                            <view class="h1" v-if="info.type == 2">帮送</view>
                            <view class="h1" v-if="info.type == 3">帮取</view>
                            <view class="h1" v-if="info.type == 4">一对一</view>
                            <view class="h1" v-if="info.type == 5">帮我买</view>
                            <view class="h2">{{info.item_type}}</view>
                        </view>
                        <view class="fr">
                            <view class="h1">已完成</view>
                        </view>
                    </view>
                    <view class="ctn">
                        <view class="ol song">
                            <view class="h1">{{info.sender_address}}</view>
                            <view class="h2">
                                {{info.sender}}
                                <text>{{info.sender_phone}}</text>
                            </view>
                        </view>
                        <view class="ol shou">
                            <view class="h1">{{info.receiver_address}}</view>
                            <view class="h2">
                                {{info.receiver}}
                                <text>{{info.receiver_phone}}</text>
                            </view>
                        </view>
                    </view>
                    <view class="btm">
                        <view class="fl">{{info.created_at}}</view>
                    </view>
                </view>
            </view>
            <view class="box">
                <view class="top">
                    <view class="fl">
                        <image :src="userInfo.avatar ? userInfo.avatar : '../../static/img/logo_app.png'"></image>
                        <view class="flCon">
                            <view class="h1">{{userInfo.name}}</view>
                            <view class="h2">{{userInfo.mobile}}</view>
                        </view>
                    </view>
<!--                    <view class="fr" @click="awardShow = true">
                        赏
                    </view>-->
                </view>
                <view class="btm">
                    <view class="btmList">
                        <view class="li">
                            <view class="fl">配送速度</view>
                            <view class="fr">
                                <u-rate v-model="speed" active-color="#418AFF" inactive-color="#ddd"></u-rate>
                            </view>
                        </view>
                        <view class="li">
                            <view class="fl">服务态度</view>
                            <view class="fr">
                                <u-rate v-model="attitude" active-color="#418AFF" inactive-color="#ddd"></u-rate>
                            </view>
                        </view>
                        <view class="li">
                            <view class="fl">配送质量</view>
                            <view class="fr">
                                <u-rate v-model="quality" active-color="#418AFF" inactive-color="#ddd"></u-rate>
                            </view>
                        </view>
                    </view>
                    <textarea placeholder="请输入评价内容" v-model="content"></textarea>
                </view>
            </view>
        </view>
        <view class="footFen" v-if="JSON.stringify(info.comment) == '{}' || JSON.stringify(info.comment) == '[]'"></view>
        <view class="footBtn" v-if="JSON.stringify(info.comment) == '{}' || JSON.stringify(info.comment) == '[]'">
            <view class="submit" @click="submit">确定</view>
        </view>
        <u-popup mode="center" :show="awardShow" @close="awardShow = false" closeOnClickOverlay :round="'25rpx'">
            <view class="awardBox">
                <view class="h1">请输入金额：</view>
                <input type="number" placeholder="请输入" v-model="price">
                <view class="submit" @click="awardSubmit">确定</view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    /*import {
        consumerDetail,
        consumerComment,
        consumerReward
    } from '../../api/api'*/
    export default {
        data() {
            return {
                id:'',
                info:'',
                speed:0,
                attitude:0,
                quality:0,
                content:'',
                awardShow:false,
                price:'',
                userInfo:''
            }
        },
        onLoad(options) {
            console.log(options);
            this.id = options.id;
            this.consumerDetailFun();
            this.getUserInfo();
        },
        onShow(){

        },
        methods: {
            getUserInfo() {
                this.globalajax('user/info', {}, 'GET', (res) => {
                    this.userInfo = res.data.data.info;
                    console.log(this.userInfo)
                });
            },
            awardSubmit(){
                if(this.price == ''){
                    return uni.showToast({
                        title:'打赏金额不能为空',
                        icon:'none'
                    })
                }
                /*consumerReward({
                    id:this.info.id,
                    price:this.price
                }).then(res => {
                    uni.showToast({
                        title:'打赏成功',
                        icon:'none'
                    });
                    this.price = '';
                    this.awardShow = false;
                })*/
            },
            submit(){
                if(this.speed == 0){
                    return uni.showToast({
                        title:'请对骑手的配送速度进行评价',
                        icon:'none'
                    })
                }
                if(this.attitude == 0){
                    return uni.showToast({
                        title:'请对骑手的服务态度进行评价',
                        icon:'none'
                    })
                }
                if(this.quality == 0){
                    return uni.showToast({
                        title:'请对骑手的配送质量进行评价',
                        icon:'none'
                    })
                }

                /*consumerComment({
                    speed:this.speed,
                    attitude:this.attitude,
                    quality:this.quality,
                    content:this.content,
                    id:this.info.id
                }).then(res => {
                    uni.showToast({
                        title:'评价成功',
                        icon:'none'
                    });
                    setTimeout(() => {
                        this.$common.back();
                        uni.$emit('returnBackData',true);
                    },1000)
                })*/
            },
            consumerDetailFun(){
                this.globalajax('order/orderInfo',{
                        id:this.id
                    },'GET',(res) => {
                    console.log(res);
                    this.info = res.data.data;
                    this.speed = this.info.comment.speed;
                    this.attitude = this.info.comment.attitude;
                    this.quality = this.info.comment.quality;
                    this.content = this.info.comment.content;
                    }
                );
                /*consumerDetail(this.id).then(res => {
                    console.log(res);
                    this.info = res.data;
                    if(JSON.stringify(this.info.comment) != '{}' && JSON.stringify(this.info.comment) != '[]'){
                        this.speed = this.info.comment.speed;
                        this.attitude = this.info.comment.attitude;
                        this.quality = this.info.comment.quality;
                        this.content = this.info.comment.content;
                    }
                })*/
            }
        }
    }
</script>
<style>
    page{
        background: #f6f6f6;
    }
</style>
<style lang="scss" scoped>
    .back{
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .main{
        position: relative;
        z-index: 2;
        padding: 0 32rpx;
        .list{
            margin-top: 32rpx;
            .li{
                background: #fff;
                border-radius: 24rpx;
                margin-top: 30rpx;
                padding: 20rpx 25rpx 25rpx 25rpx;
                box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.12);
                &:first-child{
                    margin-top: 0;
                }
                .top{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding-bottom: 15rpx;
                    border-bottom: 1px solid #418AFF;
                    .fl{
                        display: flex;
                        align-items: center;
                        .h1{
                            font-size: 35rpx;
                            color: #418AFF;
                        }
                        .h2{
                            height: 30rpx;
                            padding: 0 10rpx;
                            border-radius: 8rpx;
                            font-size: 20rpx;
                            color: #fff;
                            line-height: 30rpx;
                            margin-left: 15rpx;
                            background: #418AFF;
                        }
                    }
                    .fr{
                        .h1{
                            font-size: 25rpx;
                            color: #418AFF;
                            display: flex;
                            align-items: center;
                            /deep/ .u-count-down{
                                margin-left: 5rpx;
                                text{
                                    font-size: 25rpx;
                                    color: #FF3C26;
                                }
                            }
                        }
                    }
                }
                .ctn{
                    .ol{
                        padding: 25rpx 0 0 70rpx;
                        position: relative;
                        &:after{
                            content: '送';
                            display: block;
                            width: 52rpx;
                            height: 36rpx;
                            background: #418AFF;
                            border-radius: 8rpx;
                            position: absolute;
                            left: 0;
                            top: 32rpx;
                            font-size: 20rpx;
                            color: #fff;
                            text-align: center;
                            line-height: 36rpx;
                        }
                        &.shou{
                            &:after{
                                content: '收';
                                background: #FF3C26;
                            }
                        }
                        .h1{
                            font-size: 32rpx;
                            color: #333;
                        }
                        .h2{
                            font-size: 24rpx;
                            color: #666;
                            margin-top: 8rpx;
                            text{
                                margin-left: 20rpx;
                            }
                        }
                    }
                }
                .btm{
                    padding-top: 20rpx;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    border-top: 1px solid #eee;
                    margin-top: 32rpx;
                    .fl{
                        font-size: 24rpx;
                        color: #666;
                    }
                    .fr{
                        text{
                            box-sizing: border-box;
                            height: 50rpx;
                            padding: 0 20rpx;
                            border: 1px solid #999;
                            font-size: 24rpx;
                            line-height: 50rpx;
                            border-radius: 64rpx;
                            display: inline-block;
                            margin-left: 15rpx;
                            &.full{
                                border:none;
                                background: #418AFF;
                                color: #fff;
                            }
                        }
                    }
                }
            }
        }
        .box{
            background: #fff;
            box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.12);
            border-radius: 24rpx 24rpx 24rpx 24rpx;
            padding: 24rpx;
            margin-top: 32rpx;
            .top{
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom: 1px solid #418AFF;
                padding-bottom: 24rpx;
                .fl{
                    display: flex;
                    align-items: center;
                    flex: 1;
                    image{
                        width: 72rpx;
                        height: 72rpx;
                        border-radius: 50%;
                    }
                    .flCon{
                        flex: 1;
                        padding-left: 16rpx;
                        .h1{
                            font-size: 28rpx;
                            color: #333;
                        }
                        .h2{
                            font-size: 24rpx;
                            color: #666;
                        }
                    }
                }
                .fr{
                    width: 48rpx;
                    height: 48rpx;
                    border-radius: 50%;
                    background: #418AFF;
                    text-align: center;
                    line-height: 48rpx;
                    font-size: 24rpx;
                    color: #fff;
                }
            }
            .btm{
                .btmList{
                    .li{
                        margin-top: 24rpx;
                        display: flex;
                        align-items: center;
                        .fl{
                            font-size: 28rpx;
                            color: #333;
                            margin-right: 20rpx;
                        }
                    }
                }
                textarea{
                    height: 160rpx;
                    width: 100%;
                    background: #f6f6f6;
                    font-size: 28rpx;
                    box-sizing: border-box;
                    padding: 25rpx;
                    border-radius: 16rpx;
                    margin-top: 32rpx;
                }
            }
        }
    }
    .footFen{
        height: 166rpx;
    }
    .footBtn{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 25rpx;
        background: #fff;
        z-index: 999;
        .submit{
            height: 86rpx;
            background: #418AFF;
            border-radius: 24rpx 24rpx 24rpx 24rpx;
            font-size: 30rpx;
            color: #fff;
            text-align: center;
            line-height: 86rpx;
            margin-top: 30rpx;
        }
    }
    .awardBox{
        width: 500rpx;
        padding: 35rpx 25rpx;
        .h1{
            font-size: 28rpx;
            color: #222;
        }
        input{
            height: 86rpx;
            border:1px solid #eee;
            font-size: 28rpx;
            border-radius: 15rpx;
            margin-top: 30rpx;
            padding-left: 20rpx;
        }
        .submit{
            height: 86rpx;
            background: #418AFF;
            border-radius: 24rpx 24rpx 24rpx 24rpx;
            font-size: 30rpx;
            color: #fff;
            text-align: center;
            line-height: 86rpx;
            margin-top: 30rpx;
        }
    }
</style>
